<template>
	
	<view class="container">
	  <view class="wrapper">
	    <view class="left-top-sign">LOGIN</view>
	    <view class="welcome">
	      欢迎回来！
	    </view>
	    <view class="input-content">
	      <view class="input-item">
	        <text class="tit">手机号码</text>
			<!-- @input 事件处理函数 @change -->
	        <input  type="text" placeholder="请输入手机号码" @input="handleInput" id="phone"/>
	      </view>
	      <view class="input-item">
	        <text class="tit">密码</text>
	        <input type="password"  placeholder="请输入密码" @input="handleInput" id="password"/>
	      </view>
	    </view>
	    <button class="confirm-btn" @tap="login">登录</button>
	    <view class="forget-section">
	      忘记密码?
	    </view>
	  </view>
	  <view class="register-section">
	    还没有账号?
	    <text >马上注册</text>
	  </view>
	</view>

</template>

<script>
	// 登录流程:
	// 1. 收集表单项数据
	//   2. 前端验证
	//     1) 验证用户信息(账号，密码)是否合法
	//     2) 前端验证不通过就提示用户，不需要发请求给后端
	//     3) 前端验证通过了，发请求(携带账号, 密码)给服务器端
	//   3. 后端验证
	//     1) 验证用户是否存在
	//     2) 用户不存在直接返回，告诉前端用户不存在
	//     3) 用户存在需要验证密码是否正确
	//     4) 密码不正确返回给前端提示密码不正确
	//     5) 密码正确返回给前端数据，提示用户登录成功(会携带用户的相关信息)
	export default {
		data() {
			return {
				phone:'',
				password:''
			}
		},
		methods:{
			// 表单内容发生改变的回调
			handleInput(event) {
				// 获取对应id 的input值 event id传值
				let type = event.currentTarget.id
				//data-type传值 在input设置data-key="phone"也能达到一样的效果,传多个数值用这个
				// let type = event.currentTarget.dataset.type
				// console.log(type,event.detail.value)
				if(type === 'phone'){this.phone = event.detail.value}
				else{this.password = event.detail.value}
				
			},
			async login() {
				// console.log(this.phone)
				// console.log(this.password)
				/*
				    * 手机号验证：
				    *   1. 内容为空
				    *   2. 手机号格式不正确
				    *   3. 手机号格式正确，验证通过
				    * */
				// 如果为空
				if(!this.phone){
					this.$myShowToastErr('手机号不能为空')
					return
				}
				// 定义正则表达式
				let phoneReg = /^1(3|4|5|6|7|8|9)\d{9}$/
				// test()方法返回布尔值 通过为true 取反就是false
				if(!phoneReg.test(this.phone)){
					this.$myShowToastErr('手机号格式错误')
					return
				}
				if(!this.password){
					this.$myShowToastErr('密码不能为空')
					return
				}
				// 发起请求获取数据
				
				let res = await this.$myRequest('/login/cellphone',{
					phone:this.phone,password: this.password,isLogin:true})
				if(res.code === 200){
					// 将用户信息存储至本地
					// localhost永久存储,你不清楚就一直存在
					// session会话存储,页面关闭就没了
					// JSON.stringify(res.profile) 把JS转成JSON数据
					// reLaunch 用处
					uni.setStorageSync('userInfo',JSON.stringify(res.profile))
					uni.reLaunch({url:'/pages/personal/personal'})
					this.$myShowToastSus('登录成功')
				}else if(res.code === 502){
					this.$myShowToastErr('密码错误')
					
				}else if(res.code === 501){
					this.$myShowToastErr('账号不存在')
				}else if(res.code === 400){
					this.$myShowToastErr('手机号错误')
				}else{
					uni.showToast({
						title:'登录失败，重新登录',
						icon:'none'
					})
				}
			}
		}
	}
</script>

<style lang="scss">
	.container {
		.wrapper{
			position:relative;
			z-index: 90;
			padding-bottom: 40rpx;
			
			.left-top-sign{
				font-size: 120rpx;
				color: #f8f8f8;
				position:relative;
				left: -16rpx;
			}
			.welcome{
				position:relative;
				left: 50rpx;
				top: -90rpx;
				font-size: 46rpx;
				color: #555;
			}
			.input-content{
				padding: 0 60rpx;
				
				.input-item{
					display:flex;
					flex-direction: column;
					align-items:flex-start;
					justify-content: center;
					padding: 0 30rpx;
					background:#f8f6fc;
					height: 120rpx;
					border-radius: 4px;
					margin-bottom: 50rpx;
					
					// .input-item:last-child{
					// 	margin-bottom: 0;
					// }
					.tit{
						height: 50rpx;
						line-height: 56rpx;
						font-size: 30rpx;
						color: #606266;
					}
					input{
						height: 60rpx;
						font-size: 30rpx;
						color: #303133;
						width: 100%;
					}
				}
			}
			.confirm-btn{
				width: 630rpx!important;
				height: 76rpx;
				line-height: 76rpx;
				border-radius: 50rpx;
				margin-top: 70rpx;
				background: #0099ff;
				color: #fff;
				font-size: 32rpx;
				padding: 0;
			}
			
			.forget-section{
				font-size: 28rpx;
				color: #4399fc;
				text-align: center;
				margin-top: 40rpx;
			}
		}
		.register-section{
			position:absolute;
			left: 0;
			bottom: 50rpx;
			width: 100%;
			font-size: 28rpx;
			color: #606266;
			text-align: center;
			text{
				color: #4399fc;
				margin-left: 10rpx;
			}
		}
	}
	
	
	
	
	
	// .confirm-btn2:after{
	//   border-radius: 100px;
	// }

</style>
